<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>找回密码</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="http://light7.cn/dist/css/light7.css">
</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left external" href="#" onclick="goback();" data-transition='slide-out '>
                <span class="icon icon-left"></span>
                返回
            </a>
            <h1 class="title">找回密码</h1>
        </header>
        <div class="content">
            <div class="list-block">
                <input type="hidden" id="sessionId" name="sessionId">
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title label">手机号</div>
                            <div class="item-input">
                                <input type="text" maxlength="13" minlength="11" id="userName" name="userName"
                                       placeholder="登录手机号号">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title label">验证码</div>
                            <div class="item-input  col-80">
                                <input type="text" id="vfCode" name="vfCode" maxlength="6" placeholder="请输入验证码">
                            </div>
                            <a id="vfCodeBtn" name="vfCodeBtn" onclick="vfcPsdReset();"
                               class="button button-fill button-primary button-round col-20">获取验证码</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title label">新密码</div>
                            <div class="item-input">
                                <input type="password" id="password" name="password" placeholder="请输入密码" class="">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-inner">
                            <div class="item-title label">再次输入密码</div>
                            <div class="item-input">
                                <input type="text" id="passwordrep" name="passwordrep" placeholder="请再次输入密码" class="">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <span id="spanError" name="spanError" style="color: red;font-size: 18px;"></span>
                    </div>
                </li>
            </div>
            <div class="content-block">
                <div class="row">
                    <div class="col-100"><a href="#" onclick="pawdReset();" class="button button-big button-fill button-success">提交</a></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="http://light7.cn/assets/js/jquery-2.1.4.js" charset='utf-8'></script>
<script type='text/javascript' src='http://light7.cn/dist/js/light7.js' charset='utf-8'></script>
<script>
    //
    var InterValObj; //timer变量，控制时间
    var count = 60; //间隔函数，1秒执行
    var curCount; //当前剩余秒数

    function sendMessages() {
        curCount = count;
        $("#vfCodeBtn").attr("disabled", "true");
        $("#vfCodeBtn").text("请在" + curCount + "秒内输入");
        InterValObj = window.setInterval(SetRemainTimes, 1000); //启动计时器，1秒执行一次
    }
    //timer处理函数
    function SetRemainTimes() {
        if (curCount == 0) {
            window.clearInterval(InterValObj); //停止计时器
            $("#vfCodeBtn").removeAttr("disabled"); //启用按钮
            $("#vfCodeBtn").text("重新发送验证码");
            code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效
        } else {
            curCount--;
            $("#vfCodeBtn").text("请在" + curCount + "秒内输入");
        }
    }

    //点击验证密码
    function vfcPsdReset() {
        var phonyNumber = $("#userName").val();
        if (phonyNumber == "") {
            $("#spanError").text("请输入手机号");
            return false;
        } else {
            //开始发送验证码
            $.ajax(
                {
                    type: "POST",//方法类型
                    dataType: "json",
                    url: "/verification/vfcPsdReset",
                    data: {
                        phonyNumber: phonyNumber
                    },
                    success: function (result) {
                        if (result.code == 200) {
                            sendMessages();
                        } else {
                            var msg = result.message;
                            $("#spanError").text("ERROR：" + msg);
                        }
                    },
                    error: function () {
                        alert("系统异常！");
                    }
                }
            );
        }
    }

    //重置密码
    function pawdReset() {
        var phonyNumber = $("#userName").val();
        var vfCode = $("#vfCode").val();
        var password = $("#password").val();
        var passwordrep = $("#passwordrep").val();
        if (phonyNumber == "") {
            $("#spanError").text("请输入手机号");
            return false;
        } else if (vfCode == "") {
            //开始发送验证码
            $("#spanError").text("请输入接受到的验证码");
            return false;
        } else if (passwordrep != password) {
            $("#spanError").text("两次密码不一致");
            return false;
        } else {
            $.ajax(
                {
                    type: "POST",//方法类型
                    dataType: "json",
                    url: "/pawdReset",
                    data: {
                        userName: phonyNumber,
                        vfCode:vfCode,
                        password:password
                    },
                    success: function (result) {
                        if (result.code == 200) {
                            $("#spanError").text(msg);
                            location.href="/";
                        } else {
                            var msg = result.message;
                            $("#spanError").text("ERROR：" + msg);
                        }
                        ;
                    },
                    error: function () {
                        alert("系统异常！");
                    }
                }
            );
        }
    }
    //返回上一步
    function goback(){
        window.history.go(-1);
    }
</script>
</body>
</html>